<script setup lang="ts">
// 1.导入工具函数
import { reactive } from 'vue'

// 2，定义响应式的对象
let food = reactive({
  name: '龙江',
  price: 18,
  foods: ['米饭', '猪脚'],
})

// 不支持普通类型
// let num=reactive(009)
setTimeout(() => {
  // 不要重新赋值:如果重新赋值普通数据，丢失响应性
  food = { name: '', price: 0, foods: [] }
}, 2000)
</script>

<!-- 结构 -->
<template>
  <div>
    <p @click="food.name = '祖传隆江猪脚'">{{ food.name }}</p>
    <p @click="food.price++">{{ food.price }}</p>
    <p @click="food.foods.push('鸡腿')">{{ food.foods }}</p>
  </div>
</template>

<!-- 样式 -->
<style scoped>
</style>